<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>sample04.html</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	//载入图片按钮处理
	$(function(){
		$("#btn1").toggle(
			function(){
				$("#apple").attr("src","apple_2.gif");
			},
			function(){
				$("#apple").attr("src","apple_3.jpg");
			}
		);
	});
	//隐藏和显示按钮的处理
	$(function(){
		//隐藏
		$("#btn3").click(function(){
			$("#apple").hide("slow");
		});
		//显示
		$("#btn2").click(function(){
			$("#apple").show(2000);
		});
		//切换
		$("#btn4").click(function(){
			$("#apple").toggle(2000);
		});
	});
	//滑动效果函数
	$(function(){
		//隐藏
		$("#btn5").click(function(){
			$("#apple").slideUp(2000);
		});
		//显示
		$("#btn6").click(function(){
			$("#apple").slideDown(2000);
		});
	});
	//淡入淡出函数
	$(function(){
		//隐藏
		$("#btn7").click(function(){
			$("#apple").fadeOut(2000);
		});
		//显示
		$("#btn8").click(function(){
			$("#apple").fadeIn(2000);
		});
	});
	
</script>
  </head>
  
  <body>
    <h1>效果函数示例</h1>
    <input type="button" value="载入图片" id="btn1">
     <input type="button" value="显示" id="btn2">
     <input type="button" value="隐藏" id="btn3">
     <input type="button" value="切换" id="btn4">
    <hr/>
    <input type="button" value="滑动--隐藏" id="btn5">
    <input type="button" value="滑动--显示" id="btn6">
    <hr/>
     <input type="button" value="淡入淡出--隐藏" id="btn7">
    <input type="button" value="淡入淡出--显示" id="btn8">
    <hr/>
    <img id="apple" width="200" height="200">
  </body>
</html>
